// JavaScript Document
var zr; // 全局可用zrender对象
function fun(){
	//add_a();
var fileLocation = 'js/zrender';
require.config({
	paths: {
        zrender: fileLocation,
        'zrender/tool/color':fileLocation,
        'zrender/shape/Rose': fileLocation,
        'zrender/shape/Trochoid': fileLocation,
        'zrender/shape/Circle': fileLocation,
        'zrender/shape/Sector': fileLocation,
        'zrender/shape/Ring': fileLocation,
        'zrender/shape/Ellipse': fileLocation,
        'zrender/shape/Rectangle': fileLocation,
        'zrender/shape/Text': fileLocation,
        'zrender/shape/Heart': fileLocation,
        'zrender/shape/Droplet': fileLocation,
        'zrender/shape/Line': fileLocation,
        'zrender/shape/Image': fileLocation,
        'zrender/shape/Star': fileLocation,
        'zrender/shape/Isogon': fileLocation,
        'zrender/shape/BezierCurve': fileLocation,
        'zrender/shape/Polyline': fileLocation,
        'zrender/shape/Path': fileLocation,
        'zrender/shape/Polygon': fileLocation
	}
	,
});

require(
    [
        'zrender',
        'zrender/tool/color',
        'zrender/shape/Rose',
        'zrender/shape/Trochoid',
        'zrender/shape/Circle',
        'zrender/shape/Sector',
        'zrender/shape/Ring',
        'zrender/shape/Ellipse',
        'zrender/shape/Rectangle',
        'zrender/shape/Text',
        'zrender/shape/Heart',
        'zrender/shape/Droplet',
        'zrender/shape/Line',
        'zrender/shape/Image',
        'zrender/shape/Star',
        'zrender/shape/Isogon',
        'zrender/shape/BezierCurve',
        'zrender/shape/Polyline',
        'zrender/shape/Path',
        'zrender/shape/Polygon'
    ],
    function(zrender) {
        zr = zrender.init(document.getElementById('main'));
        console.log('zr ok');

        var color = require('zrender/tool/color');
        var colorIdx = 0;
        var width = Math.ceil(zr.getWidth());
        var height = Math.ceil(zr.getHeight());

        var CircleShape = require('zrender/shape/Circle');
        var SectorShape = require('zrender/shape/Sector');
        var RingShape = require('zrender/shape/Ring');
        var EllipseShape = require('zrender/shape/Ellipse');
        var HeartShape = require('zrender/shape/Heart');
        var DropletShape = require('zrender/shape/Droplet');
        var PolygonShape = require('zrender/shape/Polygon');
        var RectangleShape = require('zrender/shape/Rectangle');
        var PolylineShape = require('zrender/shape/Polyline');
        var LineShape = require('zrender/shape/Line');
        var BezierCurveShape = require('zrender/shape/BezierCurve');
        var TextShape = require('zrender/shape/Text');
        var ImageShape = require('zrender/shape/Image');
        var PathShape = require('zrender/shape/Path');
        var TrochoidShape = require('zrender/shape/Trochoid');
        var RoseShape = require('zrender/shape/Rose');
        var StarShape = require('zrender/shape/Star');
        var IsogonShape = require('zrender/shape/Isogon');
//画圆 
	   
	//   var circleshape=new CircleShape({
//		   	   id:'circle',
//		   style : {
//        x : 200,
//        y : 200,
//        r : 200,
//        brushType : 'both',
//        color : 'rgba(220, 20, 60, 0.8)',          // rgba supported
//        strokeColor : color.getColor(colorIdx++),  // getColor from default palette
//        lineWidth : 5,
//        text :'circle',
//        textPosition :'inside'
//		},
//
//    clickable : true,   // default false
//
//    onclick: function() {
//       
//		alert("你好");
//	},
//	  draggable : true
//	})   
//		  zr.addShape(circleshape)
//实例 
        // 绘制背景
        var backgroundImg = new ImageShape({
			id:'img_1',
            style: {
                image:document.getElementById('imgShow_WU_FILE_1').src,
                x: 0,
                y: 0,
                width: width,
                height: height
            },

            // 响应事件并动态修改图形元素
            onmousewheel: function(params){
                var eventTool = require('zrender/tool/event');
                var delta = eventTool.getDelta(params.event);
                var w = params.target.style.width;
                var h = params.target.style.height;
                w += (delta > 0 ? 1 : -1) * 10;
                h += (delta > 0 ? 1 : -1) * 10;
                if (w < 10) {
                    w = 10;
                };
                if (h < 10) {
                    h = 10;
                };
                zr.modShape(params.target.id, {style: {width: w,height:h}})
                zr.refresh();
                eventTool.stop(params.event);
            },
            draggable : true,
			//删除实例		
    clickable : true,   // default false

    onclick: function() {
		zr.delShape('img_1');
		zr.refresh();
	},
        });
        zr.addShape(backgroundImg);

        // 绘制头像
        var headImg = new ImageShape({
			id:'img_0',
            style: {
                image:document.getElementById('imgShow_WU_FILE_0').src,
                x: Math.ceil(width/2-60),
                y: 120,
                width: 120,
                height: 150
            },

            // 响应事件并动态修改
            onmousewheel: function(params){
                var eventTool = require('zrender/tool/event');
                var delta = eventTool.getDelta(params.event);
                var w = params.target.style.width;
                var h = params.target.style.height;
                w += (delta > 0 ? 1 : -1) * 10;
                h += (delta > 0 ? 1 : -1) * 10;
                if (w < 10) {
                    w = 10;
                };
                if (h < 10) {
                    h = 10;
                };
                zr.modShape(params.target.id, {style: {width: w,height:h}})
                zr.refresh();
                eventTool.stop(params.event);
            },

            draggable : true,
			//删除实例		
    clickable : true,   // default false

    onclick: function() {
		zr.delShape('img_0');
		zr.refresh();
	},
        });
        zr.addShape(headImg);

        // 姓名
        var card_name = new TextShape({
			id:'card_name',
            style : {
                x : Math.ceil(width/2+30),
                y : 310,
                brushType : 'fill',
                color : '#000000',
                text : document.getElementById('name4').value,
                textFont :document.getElementById('name4').style.fontSize+' verdana',
                textAlign : 'center',
                textBaseline : 'top',
				
            },
            draggable : true,
	//删除实例		
    clickable : true,   // default false

    onclick: function() {
		zr.delShape('card_name');
		zr.refresh();
	},
        }); 
        zr.addShape(card_name);

        // 职务
        var card_zhiwu = new TextShape({
			id:'card_zhiwu',
            style : {
                x : Math.ceil(width/2+30),
                y : 360,
                brushType : 'fill',
                color : '#000000',
                text : document.getElementById('name6').value,                
				textFont :document.getElementById('name6').style.fontSize+' verdana',
                textAlign : 'center',
                textBaseline : 'top'
            },
			
            draggable : true,
			//删除实例		
    clickable : true,   // default false

    onclick: function() {
		zr.delShape('card_zhiwu');
		zr.refresh();
	},
        }); 
        zr.addShape(card_zhiwu);

        // 部门
        var card_dept = new TextShape({
			id:'card_dept',
            style : {
                x : Math.ceil(width/2+30),
                y : 425,
                brushType : 'fill',
                color : '#000000',
                text : document.getElementById('name5').value,
                textFont :document.getElementById('name5').style.fontSize+' verdana',
                textAlign : 'center',
                textBaseline : 'top,'
				
            },
            draggable : true,
			//删除实例		
    clickable : true,   // default false

    onclick: function() {
		zr.delShape('card_dept');
		zr.refresh();
	},
			
        }); 
        zr.addShape(card_dept);
	 // 额外添加文本图片
	function add_a(){
		for (var i=0;i<element;i++){	
       
	    var card_number = new TextShape({
            style : {
                x : Math.ceil(width/2+30),
                y : 390,
                brushType : 'fill',
                color : '#000000',
                text :document.getElementById('text_one').value,
                textFont : 'normal 16px verdana',
                textAlign : 'center',
                textBaseline : 'top'
            },
            draggable : true
        }); 
        zr.addShape(card_number);
		}	
		return zr;
		}

        // 渲染
        zr.render();


    } /* //function(zrender) */
);
};

function addText(){
	var TextShape = require('zrender/shape/Text');
	var card_name = new TextShape({
		id:'addText_1',
		style : {
			x : 10,
			y : 10,
			brushType : 'fill',
			color : '#000000',
			text : document.getElementById('text_one').value,
			textFont :document.getElementById('name4').style.fontSize+' verdana',
			textAlign : 'center',
			textBaseline : 'top',
			
		},
	
	draggable : true,
	//删除实例		
    clickable : true,   // default false

    onclick: function() {
		zr.delShape('addText_1');
		zr.refresh();
	},
	})
	

	zr.addShape(card_name);
	zr.render();
	};

//function addText(){
//	       // 姓名
//var TextShape = require('zrender/shape/Text');
//	var card_name = new TextShape({
//		style : {
//			x : 10,
//			y : 10,
//			brushType : 'fill',
//			color : '#000000',
//			text : document.getElementById('text_one').value,
//			textFont :document.getElementById('name4').style.fontSize+' verdana',
//			textAlign : 'center',
//			textBaseline : 'top',
//			
//		},
//		_p_x : 0,
//		_p_y : 0,
//		
//		ondragend : function(params){
//			var p_x = params.target.position[0];
//			var p_y = params.target.position[1];
//			params.target._p_x = p_x +   Math.ceil(params.target.getRect(    params.target.style.width   )/2);
//			params.target._p_y = p_y;
//			
//			console.log(params.target);
//		},
//		draggable : true,
//	}); 
//	zr.addShape(card_name);
//	
//	glbText.push(card_name);
//		
//	zr.render();
//}
//
